<template>
  <div>
    <h3>书籍管理</h3>
    <el-table :data="book" style="width: 70%" height="250">
      <el-table-column fixed prop="create_time" label="日期" width="150">
      </el-table-column>
      <el-table-column prop="book_name" label="书名" width="120">
      </el-table-column>
      <el-table-column prop="book_price" label="价格" width="120">
      </el-table-column>
      <el-table-column prop="book_num" label="库存" width="120">
      </el-table-column>
      <el-table-column prop="book_text" label="书籍介绍" width="150">
      </el-table-column>
      <el-table-column prop="book_author" label="作者" width="120">
      </el-table-column>
      <el-table-column label="操作">
        <template #default="scope">
          <el-button type="primary" :icon="Delete" @click="del(scope.row.id)"
            >删除</el-button
          >
          <el-button type="primary" :icon="Delete" @click="upd(scope.row.id)"
            >修改</el-button
          >
        </template>
      </el-table-column>
    </el-table>
  </div>
  <div>
    <el-form
      :model="one"
      status-icon
      :rules="rules"
      ref="ruleForm"
      label-width="100px"
      class="demo-ruleForm"
    >
      <el-form-item label="id" prop="id" class="aa">
        <el-input type="id" v-model="one.id"></el-input>
      </el-form-item>
      <el-form-item label="书名" prop="book_name" class="aa">
        <el-input type="book_name" v-model="one.book_name"></el-input>
      </el-form-item>
      <el-form-item label="库存" prop="book_num" class="aa">
        <el-input v-model="one.book_num"></el-input>
      </el-form-item>
      <el-form-item label="书籍介绍" prop="book_text" class="aa">
        <el-input v-model="one.book_text"></el-input>
      </el-form-item>
      <el-form-item label="作者" prop="book_author" class="aa">
        <el-input v-model="one.book_author"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="upgrade">确认修改</el-button>
        <el-button @click="resetForm('ruleForm')">重置</el-button>
        <el-button type="primary"><a href="/addbooks" style="text-decoration: none;">添加</a></el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import Axios from "axios";

export default {
  name: "",
  data() {
    return {
      book: [],
      one: [],
    };
  },
  props: {},

  components: {},

  created() {},

  mounted() {
    Axios.get("http://127.0.0.1:5000/books/list").then((res) => {
      console.log("获取所有的书籍>>>", res.data);
      this.book = res.data.data;
    });
  },

  methods: {
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    upd(id) {
      Axios.get("http://127.0.0.1:5000/books/one/" + id).then((res) => {
        console.log("获取修改用户的信息>>", res.data);
        this.one = res.data.data;
      });
    },
    upgrade() {
      Axios.put("http://127.0.0.1:5000/books/update", this.one).then((res) => {
        console.log("修改的响应>>>", res.data);
        if (res.data.code == 200) {
          this.$notify({
            title: "成功",
            message: "修改成功",
            type: "success",
          });
          Axios.get("http://127.0.0.1:5000/books/list").then((res) => {
            this.book = res.data.data;
          });
        } else {
          this.$notify.error({
            title: "错误",
            message: res.data.message,
          });
        }
      });
    },
    del(id) {
      Axios.delete("http://127.0.0.1:5000/books/delete/" + id).then((res) => {
        console.log("删除的响应>>>", res.data);
        if (res.data.code == 200) {
          this.$notify({
            title: "成功",
            message: "删除成功",
            type: "success",
          });
          Axios.get("http://127.0.0.1:5000/books/list").then((res) => {
            this.book = res.data.data;
          });
        } else {
          this.$notify.error({
            title: "错误",
            message: res.data.message,
          });
        }
      });
    },
  },

  computed: {},

  watch: {},

  directives: {},

  filters: {},
};
</script>

<style>
.aa {
  width: 400px;
}
</style>
